<template>
	<view class="order">
		<!-- <view v-if="hasLogin"> -->
		<!-- 导航 -->
		<u-navbar back-text="支付试岗定金" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" title="支付试岗定金" title-color="#3F3F3F" :title-bold="true" :border-bottom="false" :background="background"></u-navbar> -->
		<!-- end -->
		<view style="padding: 44rpx 40rpx 0 44rpx;" @click="getAddress()">
			<view class="" style="font-size: 30rpx;font-weight: bold;color: #7A7A7A;">
				{{ address.addressId ? address.contactsName : '' }} {{ address.addressId ? address.contactsPhone : '' }}
			</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view style="display: flex;margin-top: 20rpx;font-size: 26rpx;color: #7A7A7A;">
					<view>详细地址：</view>
					<view class="feet">
						<view class="">
							{{ address.addressId ? address.province : '' }}{{ address.addressId ? address.city : '' }}{{ address.addressId ? address.region : ''
							}}{{ address.addressId ? address.address : '' }}
						</view>
					</view>
				</view>
				<image src="../../static/icon/jian.png" mode="" style="width: 10rpx;height: 20rpx;"></image>
			</view>
		</view>
		<image src="../../static/icon/dixian.png" mode="" style="width: 100%;height: 4rpx;"></image>
		<view class="shop">
			<view style="display: flex;justify-content: space-between;padding:12rpx 32rpx;">
				<view class="shop_name" style="">
					<image src="../../static/icon/logo.png" mode=""></image>
					<view>{{ entName }}</view>
				</view>
				<view class="richeng" @click="schedule(employee.employeeId)">
					<view style="">查看她的日程</view>
					<image src="../../static/icon/youj.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>

			<view class="allorder">
				<view class="orders">
					<view><image :src="employee.portrait" mode="" class="order_img"></image></view>
					<view class="person">
						<view class="fenshu">
							<view class="usern">{{ employee.name }}</view>
							<view class="rates">{{ employee.score }}分</view>
							<!-- <view>
								<u-rate active-color="#F29423" :current="employee.score" :disabled="true"></u-rate>
							</view> -->
						</view>
						<view class="style">
							<text>{{ employee.age }}岁</text>
							<text class="pad">{{ employee.nativePlace }}人</text>
							<text class="pad">服务{{ employee.workYear }}年</text>
							<text class="pad">{{ employee.education }}学历</text>
						</view>
						<view class="goodAt">
							<view class="leis" v-for="(item, index) in goodAtList" :key="index">{{ item }}</view>
						</view>
						<view style="float: right;font-size: 30rpx;color: #F29423;">{{ employee.univalence }}{{ employee.univalenceUnit }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_name">
				<view class="lei">服务类型</view>
				<view v-if="businessName" class="foot_style">{{ businessName }}</view>
			</view>
			<view class="foot_name">
				<view class="lei">下单时间</view>
				<view class="foot_style">{{ createTime }}</view>
			</view>
			<view class="foot_name">
				<view class="lei">试岗开始时间</view>
				<view class="foot_styles">
					<u-select style="line-height: 32rpx;width: 4%;" v-model="show" mode="mutil-column-auto" :list="list" confirm-color="#FCC800" @confirm="confirm"></u-select>
					<view style="width: 240rpx;text-align: right;" @click="show = true">{{ result }}</view>
					<image @click="show = true" src="../../static/icon/jian.png" mode=""></image>
				</view>
			</view>
			<view class="foot_name">
				<view class="lei">试岗结束时间</view>
				<view class="foot_style">{{ results }}</view>
			</view>

			<view class="shuoming">定金说明：</view>
			<view class="ding">
				<view>1.</view>
				<view>定金金额为服务人员月工资的10%</view>
			</view>
			<view class="ding">
				<view>2.</view>
				<view>试岗开始后您随时可以结束试岗，定金将会扣除员工实 际试岗天数的工资，剩余的将会退回到您的支付账户</view>
			</view>
			<view class="ding">
				<view>3.</view>
				<view>试岗结束后，如果签约该员工，10%的首月定金会抵扣您的实际签约全额的一部分</view>
			</view>
		</view>
		<view class="footer">
			<view class="foot_mon">
				<view class="write">
					金额：
					<text>{{ prepaid }}元</text>
				</view>
				<view><u-button size="medium" type="warning" shape="circle" @click="fastPay(result, results)">立即支付</u-button></view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			is_click: true,
			background: {
				backgroundColor: '#ffffff'
			},
			tabs: [
				{
					name: '全部',
					type: 'em'
				},
				{
					name: '待确认',
					type: 'package'
				},
				{
					name: '待支付',
					type: 'ez'
				},
				{
					name: '待服务',
					type: 'ef'
				},
				{
					name: '服务中',
					type: 'ew'
				},
				{
					name: '投诉中',
					type: 'et'
				},
				{
					name: '待评价',
					type: 'ep'
				}
			],
			tabsType: 'em',
			value: 4,
			goodAtList: [],
			show: false,
			list: [],
			arrayInex: [],
			result: '',
			results: '',
			orderId: '',
			address: {
				addressId: null
			},
			details: '',
			employee: '',
			prepaid: '',
			entPortrait: '',
			entName: '',
			businessName: '',
			createTime: ''
		};
	},
	onLoad(option) {
		that = this;
		this.orderId = option.orderId;
		this.getDatas();
		this.getDepositDetail();
	},
	onShow() {
		that.is_click = true;
	},
	methods: {
		getDepositDetail() {
			let _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/prepaid'
			};
			let data = {
				orderId: _this.orderId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					_this.details = res.data;
					_this.prepaid = res.data.prepaid;
					if (res.data.addressInfo) {
						_this.address = res.data.addressInfo;
					}
					_this.entName = res.data.entName;
					_this.businessName = res.data.businessName;
					_this.createTime = res.data.createTime;
					_this.entPortrait = res.data.entPortrait;
					_this.employee = res.data.employee;
					_this.goodAtList = res.data.employee.skills;
					_this.result = res.data.probationStart;
					_this.results = res.data.probationEnd;
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		getAddress() {
			uni.navigateTo({
				url: '../personal/address?type=1'
			});
		},
		//推送
		ts() {
			uni.requestSubscribeMessage({
				tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
				success(res) {},
				fail(err) {}
			});
		},
		fastPay(result, results) {
			if (that.is_click == true) {
				that.is_click = false;
				let _this = this;
				if (!_this.address.addressId) {
					_this.$refs.uToast.show({
						title: '请选择地址！'
					});
				} else {
					// that.ts()
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'orders/pay/prepaid'
					};
					let data = {
						orderId: _this.orderId,
						startDate: result,
						endDate: results,
						addressId: this.address.addressId
					};
					_this.http.httpTokenRequest(opts, data).then(res => {
						that.is_click = true;
						console.log(res, 'res');
						if (res.code == 200) {
							var needstr = res.data;
							uni.requestSubscribeMessage({
								tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
								success(res) {
									if (needstr.needPay == 0) {
										uni.redirectTo({
											url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
										});
									} else {
										_this.wxpay(needstr.vxPayData);
									}
								},
								fail(err) {
									if (needstr.needPay == 0) {
										uni.redirectTo({
											url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
										});
									} else {
										_this.wxpay(needstr.vxPayData);
									}
								}
							});
							// _this.wxpay(res.data.vxPayData)
						} else {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							});
						}
					});
				}
			} else {
				// uni.showToast({
				// 	title:'请不要频繁操作',
				// 	icon:'none'
				// })
			}
		},
		wxpay(str) {
			let _this = this;
			let query = str;
			uni.requestPayment({
				provider: 'wxpay',
				appId: query.appId,
				timeStamp: query.timeStamp + '',
				nonceStr: query.nonceStr,
				package: query.package,
				signType: query.signType,
				paySign: query.sign,
				success: res => {
					uni.redirectTo({
						url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
					});
				},
				fail: val => {
					uni.redirectTo({
						url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 2
					});
				}
			});
		},
		schedule(employeeId) {
			uni.navigateTo({
				url: '../home/herSchedule/herSchedule?employeeId=' + employeeId
			});
		},
		getDatas() {
			var arr = [];
			var _this = this;
			var date = new Date();
			var year = date.getFullYear();
			var mon = date.getMonth() + 1;
			var day = date.getDate();
			if (mon <= 9) {
				//如果小于9的话，则需要加上0
				mon = '0' + mon;
			} //getdate()返回的是1-31，则不需要加1
			if (day <= 9) {
				//如果小于9的话，则需要加上0
				day = '0' + day;
			}
			var showDate = year + '-' + mon + '-' + day;
			var nextData = '';
			for (var i = 1; i <= 6; i++) {
				//后7天
				date.setDate(date.getDate() + 1);
				var mons = date.getMonth() + 1;
				if (mons <= 9) {
					mons = '0' + mons;
				}
				var days = date.getDate();
				if (days <= 9) {
					days = '0' + days;
				}
				nextData = date.getFullYear() + '-' + mons + '-' + days;
				arr.push({
					value: i + 1,
					label: nextData
				});
			}
			this.list = arr;
			this.result = arr[0].label;
			// this.results = arr[3].label;
		},
		//点击确定的值
		confirm(e) {
			var _this = this;
			console.log(e);
			_this.result = e[0].label;
			var arr = [];
			var date = new Date(_this.result);
			var showDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			var nextData = '';
			for (var i = 1; i <= 6; i++) {
				//后7天
				date.setDate(date.getDate() + 1);
				var mons = date.getMonth() + 1;
				if (mons <= 9) {
					mons = '0' + mons;
				}
				var days = date.getDate();
				if (days <= 9) {
					days = '0' + days;
				}
				nextData = date.getFullYear() + '-' + mons + '-' + days;
				arr.push({
					value: i + 1,
					label: nextData
				});
			}
			_this.results = arr[2].label;
		}
	}
};
</script>

<style scoped lang="scss">
/* 导航 */

.shop {
	// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	margin: 10rpx 28rpx 0 26rpx;
}

.shop_name {
	display: flex;
	align-items: center;
}

.shop_name image {
	width: 41rpx;
	height: 48rpx;
}

.line {
	border: 2rpx solid #e4e4e4;
}

.allorder {
	padding: 6rpx 14rpx 12rpx 22rpx;
}

.orders {
	display: flex;
}

.orders .order_img {
	width: 176rpx;
	height: 258rpx;
}

.person {
	padding-left: 10rpx;
	width: 520rpx;
}

.usern {
	font-size: 30rpx;
	color: #656565;
	font-weight: 500;
	display: flex;
	justify-content: space-between;
}

.richeng {
	display: flex;
	font-size: 28rpx;
	align-items: center;
	color: #979797;
}

.richeng view {
	padding-right: 12rpx;
}

.richeng image {
	width: 10rpx;
	height: 18rpx;
}

.fenshu {
	display: flex;
	align-items: center;
	padding-top: 14rpx;
}

.rates {
	color: #f29423;
	font-size: 22rpx;
	margin-left: 18rpx;
	background-color: #fff6eb;
	padding: 2rpx 10rpx;
	border-radius: 20rpx;
}

.style {
	padding-top: 8rpx;
	font-size: 22rpx;
	color: #3f3f3f;
	font-weight: 500;
}

.pad {
	padding-left: 18rpx;
}

.foot {
	padding: 4rpx 40rpx 160rpx 40rpx;
	font-family: PingFang SC;
}

.foot_name {
	display: flex;
	justify-content: space-between;
	padding-top: 30rpx;
	font-size: 26rpx;
	font-weight: 500;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #ebebeb;
}

.lei {
	color: #0f1826;
	font-weight: 500;
}

.footer {
	position: fixed;
	z-index: 99;
	bottom: 0;
	width: 100%;
	background: #ffffff;
	opacity: 1;
}

.foot_mon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 38rpx 20rpx 32rpx 40rpx;
}

.write {
	font-size: 38rpx;
	font-weight: 500;
}

.write text {
	color: #fa5151;
}

.goodAt {
	display: flex;
	flex-wrap: wrap;
	font-size: 22rpx;
	color: #f29423;
}

.leis {
	border: 1px solid #f29423;
	padding: 6rpx 10rpx;
	margin: 12rpx 12rpx 0 0;
	border-radius: 10rpx;
}

.foot_style {
	padding-right: 40rpx;
}

.foot_styles {
	display: flex;
	align-items: center;
}

.foot_styles view {
	width: 178rpx;
	padding-right: 25rpx;
}

.foot_styles image {
	width: 14rpx;
	height: 26rpx;
}

.feet {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.feet view {
	// width: 384rpx;
	padding-left: 8rpx;
	// overflow: hidden;
	// text-overflow: ellipsis;
	// white-space: nowrap;
}

.feet image {
	width: 14rpx;
	height: 26rpx;
}

.ding {
	margin-top: 22rpx;
	color: #979797;
	font-size: 26rpx;
	line-height: 36rpx;
	display: flex;
}

.shuoming {
	margin-top: 112rpx;
	font-size: 30rpx;
	color: #3f3f3f;
	font-weight: 400;
}
</style>
